<template>
    <div>
        <n-tabs v-model:value="tabValue" justify-content="start" type="line">
            <n-tab-pane name="list" tab="文章列表">
                <div v-for="(item, index) in blogListInfo" :key="index" style="margin-bottom: 15px">
                    <n-card :title=item.title>
                        {{ item.content }}
                        <template #footer>
                            <n-space align="center">
                                <div>发布时间：{{ item.create_time }}</div>
                                <n-button @click="toUpdate(item)">修改</n-button>
                                <n-button @click="deleteBlog(item)">删除</n-button>
                            </n-space>
                        </template>
                    </n-card>
                </div>
                <n-space align="center">
                    <div class="pagination" title="上一页" v-show="pageInfo.page !== 1" @click="prevPage">&lt</div>
                    <div v-for="pageNum in pageInfo.page_count" :key="pageNum" @click="toPage(pageNum)">
                        <div class="pageNum" :style="'color:' + (pageNum == pageInfo.page ? 'blue' : '')">{{ pageNum }}
                        </div>
                    </div>
                    <div class="pagination" title="下一页" v-show="pageInfo.page !== pageInfo.page_count"
                        @click="nextPage">&gt</div>
                </n-space>
            </n-tab-pane>
            <n-tab-pane name="add" tab="添加文章">
                <n-form>
                    <!-- <n-form-item label="编号">
                        <n-input v-model:value="addBlog.category_id" />
                    </n-form-item> -->
                    <n-form-item label="标题">
                        <n-input v-model:value="addBlog.title" placeholder="请输入标题" />
                    </n-form-item>
                    <n-form-item label="分类">
                        <n-select v-model:value="addBlog.category_id" :options="categoryOptions"></n-select>
                    </n-form-item>
                    <n-form-item label="内容">
                        <RichTextEditor v-model="addBlog.content"></RichTextEditor>
                    </n-form-item>
                    <n-form-item label="">
                        <n-button @click="addSubmit">提交</n-button>
                    </n-form-item>
                </n-form>
            </n-tab-pane>
            <n-tab-pane name="update" tab="修改">
                <n-form>
                    <!-- <n-form-item label="编号">
                        <n-input v-model:value="addBlog.category_id" />
                    </n-form-item> -->
                    <n-form-item label="标题">
                        <n-input v-model:value="updateBlog.title" placeholder="请输入标题" />
                    </n-form-item>
                    <n-form-item label="分类">
                        <n-select v-model:value="updateBlog.category_id" :options="categoryOptions"></n-select>
                    </n-form-item>
                    <n-form-item label="内容">
                        <RichTextEditor v-model="updateBlog.content"></RichTextEditor>
                    </n-form-item>
                    <n-form-item label="">
                        <n-button @click="updateSubmit">提交</n-button>
                    </n-form-item>
                </n-form>
            </n-tab-pane>
        </n-tabs>
    </div>
    <!-- {{ addBlog.content }} -->
</template>

<script setup>
import RichTextEditor from '../../components/RichTextEditor.vue'
import { ref, reactive, inject, onMounted } from 'vue'
import { AdminStore } from '../../stores/admin'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const axios = inject('axios')
const message = inject('message')
const dialog = inject('dialog')

const adminStore = AdminStore()

const addBlog = reactive({
    category_id: '',
    title: '',
    content: ''
})

const updateBlog = reactive({
    id: 0,
    category_id: '',
    title: '',
    content: ''
})

// 切换标签页
const tabValue = ref('list')

const addSubmit = async () => {
    let results = await axios.post('/blog/_token/add', addBlog)
    if (results.data.code == 200) {
        message.info(results.data.msg)
        addBlog.category_id = ''
        addBlog.title = ''
        addBlog.content = ''
    } else {
        message.error(results.data.msg)
    }
}

const categoryOptions = ref([])
onMounted(() => {
    loadCategories()
    loadBlogs()
})

const loadCategories = async () => {
    let results = await axios.get('/category/getList')
    if (results.err == null) {
        // console.log(results)
        categoryOptions.value = results.data.results.map(item => {
            return {
                label: item.name,
                value: item.id
            }
        })
    }
}

// 分页
const pageInfo = reactive({
    page: 1,
    page_size: 3,
    page_count: 0,
    count: 0
})

// 博客列表
const blogListInfo = ref([])
const loadBlogs = async () => {
    let results = await axios.get(`/blog/search?page=${pageInfo.page}&page_size=${pageInfo.page_size}`)
    // console.log(results)
    let temp_results = results.data.data.results
    for (let item of temp_results) {
        item.content += '...'
        let d = new Date(item.create_time)
        item.create_time = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
    }
    blogListInfo.value = temp_results
    pageInfo.count = results.data.data.count
    pageInfo.page_count = Math.ceil(pageInfo.count / pageInfo.page_size)
    // console.log(pageInfo)
}

// 分页跳转
const toPage = async pageNum => {
    pageInfo.page = pageNum
    loadBlogs()
}

const prevPage = async () => {
    if (pageInfo.page > 1) pageInfo.page--
    loadBlogs()
}

const nextPage = async () => {
    if (pageInfo.page < pageInfo.page_count) pageInfo.page++
    loadBlogs()
}

const toUpdate = async item => {
    tabValue.value = 'update'
    let result = await axios.get(`/blog/detail?id=${item.id}`)
    // console.log(result)
    if(result.data.code === 200){
        updateBlog.id = result.data.results[0].id
        updateBlog.category_id = result.data.results[0].category_id
        updateBlog.title = result.data.results[0].title
        updateBlog.content = result.data.results[0].content
    }
}

const updateSubmit = async () => {
    let results = await axios.post('/blog/_token/update', updateBlog)
    if (results.data.code == 200) {
        message.info(results.data.msg)
        tabValue.value = 'list'
        loadBlogs()
    } else {
        message.error(results.data.msg)
    }
}

const deleteBlog = async item => {
    dialog.warning({
        title: '警告',
        content: '确定删除改分类？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            let results = await axios.post(`/blog/_token/delete?id=${item.id}`)
            if (results.data.code == 200) {
                message.info(results.data.msg)
                loadBlogs()

            } else {
                message.error(results.data.msg)
            }
        },
        onNegativeClick: () => {

        }
    })

}

</script>

<style lang="scss" scoped>
.pageNum {
    cursor: pointer;
}

.pagination {
    border: 1px solid rgba(128, 128, 128, 0.5);
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border-radius: 5px;
}
</style>